<template>
  <div ref="anim-f">
    <div ref="anim-t" class="anim-t anim-target-hidden">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'gradientAnimation',
  mounted() {
    this.handleObserver()
  },
  methods: {
    //交叉观察器，监听动画
    handleObserver() {
      let options = {
        rootMargin: '0px 0px -20px 0px'
      }
      const myObserver = new IntersectionObserver((entries, observer) => {
        //entries进入视窗的目标，是个数组
        entries.forEach((item) => {
          //如果目标进入视窗
          if (item.isIntersecting) {
            this.$refs['anim-t'].classList.add('anim-target-show')
            // observer.unobserve(item.target)
          } else {
            //向下滚动，保留元素
            if (this.$global.dir === 1) return
            this.$refs['anim-t'].classList.remove('anim-target-show')
          }
        })
      }, options)

      //添加监听事件
      myObserver.observe(this.$refs['anim-f'])
    }
  }
}
</script>

<style scoped lang="less">
.anim-t {
  height: inherit;
}
.anim-target-hidden {
  transform: scale(0);
  transform-origin: bottom;
  transition: 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.anim-target-show {
  transform: scale(1);
}
</style>
